<template>
  <div>
    <van-form @failed="onFailed" style="margin-top: 20px" @submit="savePatientCard">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
            v-model="name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ pattern:namePattern, message: '请输入正确姓名' }]"
            style="height: 70px;font-size: 1.2em"
        />

        <!-- 通过 validator 进行身份证函数校验 -->
        <van-field
            v-model="identificationNumber"
            name="identificationNumber"
            label="身份证号码"
            placeholder="请输入身份证号码"
            readonly
            @touchstart.stop="identificationNumberShow = true;phoneShow = false;"
            :rules="[{ validator, message: '请输入18位身份证号码' }]"
            style="height: 70px;font-size: 1.2em"
        />
        <van-number-keyboard
            v-model="identificationNumber"
            :show="identificationNumberShow"
            :maxlength="18"
            extra-key="X"
            close-button-text="完成"
            @blur="identificationNumberShow = false"
        />

        <van-field
            v-model="phone"
            name="phone"
            label="手机号码"
            placeholder="请输入手机号码"
            @touchstart.stop="phoneShow = true;identificationNumberShow = false"
            readonly
            :rules="[{ pattern:phonePattern, message: '请输入正确手机号码' }]"
            style="height: 70px;font-size: 1.2em"
        />
        <van-number-keyboard
            v-model="phone"
            :show="phoneShow"
            :maxlength="11"
            close-button-text="完成"
            @blur="phoneShow= false"
        />

        <van-field
            v-model="relationValue"
            is-link
            readonly
            label="就诊人关系"
            placeholder="请选择"
            @click="showPicker = true"
            style="height: 70px;font-size: 1.2em"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onPickerConfirm"
          />
        </van-popup>

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          添加就诊卡
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import {PatientService} from "@/api/api";
import { showToast } from 'vant';

const name = ref('');
const identificationNumber = ref('');
const phone = ref('');
const relationValue = ref('');

const identificationNumberShow = ref(false);
const phoneShow = ref(false);
const showPicker = ref(false);

const namePattern = /^.{2,10}$/;
const phonePattern = /^1[34578]\d{9}$/;
const validator = (val) => /^[1-9]\d{16}[\dXx]$/.test(val);

const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};

const columns = [
  { text: '本人', value: '1' },
  { text: '父母', value: '2' },
  { text: '夫妻', value: '3' },
  { text: '子女', value: '4' },
  { text: '兄弟姐妹', value: '5' },
  { text: '其他亲属', value: '6' },
  { text: '朋友', value: '7' },
];
function getValueByText(targetText) {
  const foundItem = columns.find(item => item.text === targetText);
  return foundItem ? foundItem.value : null;
}

const savePatientCard = async () => {
  // 从身份证号码中获取出生日期
  const birthYear = identificationNumber.value.substring(6, 10);
  const birthMonth = identificationNumber.value.substring(10, 12);
  const birthDay = identificationNumber.value.substring(12, 14);
  const pBirth = `${birthYear}-${birthMonth}-${birthDay}`;

  // 从身份证号码中获取性别
  const genderCode = parseInt(identificationNumber.value.charAt(16));
  const pGender = genderCode % 2 === 0 ? 2 : 1;

  const reValue = getValueByText(relationValue.value);
  // 构造要发送给后端的数据对象
  const patientData = {
    pname: name.value,
    pgender: pGender,
    pbirth: pBirth,
    telNumber: phone.value,
    idCardNumber: identificationNumber.value,
    relationship: reValue,
    loginId: 1,
    memo: '用户手动添加',
    // 其他字段根据需要添加
  };
  console.log(patientData);
  // 调用后端API接口发送保存数据的请求
  const response = await PatientService.savePatientCard(patientData);
  if(response.data === true)
    showToast('添加成功');
  else
    showToast('添加失败');
};


const onPickerConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  relationValue.value = selectedOptions[0].text;
};
</script>

<style scoped>

</style>